<template>
  <div class="content">
    <div class="top">
      <el-select
        v-model="value"
        clearable
        placeholder="选择状态"
        style="width: 10%"
      >
        <el-option
          v-for="item in valueList"
          :key="item.value"
          :label="item.text"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-input
        v-model="unitname"
        placeholder="单元名称"
        class="ipt"
      ></el-input>
      <el-input v-model="buildnum" placeholder="幢号" class="ipt"></el-input>
      <el-input v-model="homenum" placeholder="房号" class="ipt"></el-input>
      <el-input v-model="homename" placeholder="住房姓" class="ipt"></el-input>
      <!-- 日期 -->
      <el-button
        type="primary"
        icon="el-icon-search"
        @click="search"
        style="margin-left: 20px"
        class="button1"
        >查询</el-button
      >
      <el-button
        type="success"
        icon="el-icon-plus"
        @click="excel()"
        class="button2"
        >批量导出</el-button
      >
      <el-button
        type="danger"
        icon="el-icon-refresh-right"
        @click="delSelect"
        class="button3"
        >批量删除</el-button
      >
    </div>
    <div class="list">
      <el-table
        @selection-change="handleSelectionChange"
        ref="multipleTable"
        :data="tableData"
        border
        stripe
        align="center"
        tooltip-effect="dark"
        :header-cell-style="{
          background: '#eef1f6',
          color: '#1f2d3d',
          'border-color': '#dfe6ec',
        }"
        style="width: 100%; font-size: 14px; color: #1f2d3d"
        v-loading="loading"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="序号" prop="index" width="55" type="index">
        </el-table-column>
        <el-table-column prop="unitname" label="单元名称" align="center">
        </el-table-column>
        <el-table-column
          prop="buildnum"
          label="幢号"
          align="center"
          show-overflow-tooltip
        >
          <template scope="scope">
            <span v-if="scope.row.buildnum == null">暂无</span>
            <span v-if="scope.row.buildnum">{{ scope.row.buildnum }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="storeynum" label="楼层号" align="center">
          <template scope="scope">
            <span v-if="scope.row.storeynum == null">暂无</span>
            <span v-if="scope.row.storeynum">{{ scope.row.storeynum }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="homenum"
          label="房号"
          show-overflow-tooltip
          :formatter="showFormatter"
          align="center"
        >
          <template scope="scope">
            <span v-if="scope.row.homenum == null">暂无</span>
            <span v-if="scope.row.homenum">{{ scope.row.homenum }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="homename"
          label="住客姓名"
          show-overflow-tooltip
          align="center"
        >
          <template scope="scope">
            <span v-if="scope.row.homename == null">暂无</span>
            <span v-if="scope.row.homename">{{ scope.row.homename }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="homestatus"
          label="状态"
          :formatter="typeFormatter"
          align="center"
        >
          <template scope="scope">
            <span v-if="scope.row.homestatus == 2">未入住</span>
            <span v-if="scope.row.homestatus == null">未入住</span>
            <span v-if="scope.row.homestatus == 1">已入住</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作" align="center">
          <template slot-scope="scope">
            <div style="display: flex; margin-left: 13px">
              <el-button
                :plain="true"
                size="mini"
                style="color: #62a8ea; background-color: #fff; font-size: 12px"
                @click="detail(scope.row)"
                >编辑</el-button
              >
              <el-button
                :plain="true"
                size="mini"
                style="font-size: 12px; color: black; background-color: #fff"
                @click="deleteData(scope.row, scope.$index)"
                type="danger"
                >删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @current-change="handleCurrentChange"
          layout="total, sizes,prev, pager, next, jumper"
          :page-size="pageSize"
          :current-page="cur_page"
          :page-sizes="[5, 10, 20, 50]"
          :total="total"
          background
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import * as XLSX from 'xlsx';
export default {
  name: "userIndex",
  data() {
    return {
      // 顶部基本信息搜索
      value: "",
      unitname: "",
      buildnum: "",
      homenum: "",
      homename: "",

      valueList: [
        {
          text: "已入住",
          value: "1",
        },
        {
          text: "未入住",
          value: "2",
        },
      ],

      // 批量删除

      selectedIds: [],

      context: "",
      dialogTableVisible: false,

      tableData: [],
      loading: false,
      loaded: false,
      total: 0,
      cur_page: 1,
      pageSize: 10,
      pageNo: 1,
    };
  },
  created() {
    this.getData();
  },
  mounted() {},
  methods: {

    //导出excel
    // 导出 Excel
    excel() {
      // 创建一个工作簿
      const wb = XLSX.utils.book_new();

      // 将 tableData 转换为工作表
      const ws = XLSX.utils.json_to_sheet(this.tableData);

      // 添加工作表到工作簿
      XLSX.utils.book_append_sheet(wb, ws, "Sheet1");

      // 导出文件
      XLSX.writeFile(wb, "exported_data.xlsx");
    },
    //选中的id
    handleSelectionChange(selection) {
      this.selectedIds = selection.map((row) => row.id);
      console.log("Selected IDs:", this.selectedIds);
    },
    // 分页导航
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getData();
      this.search();
    },
    handleSizeChange(val) {
      this.cur_page = 1;
      this.pageSize = val;
      this.getData();
      this.search();
    },
    // 获取用户表信息
    getData() {
      this.loading = true;
      this.$Axios({
        url: "/house/gethouseList",
        method: "get",
        data: {
          pageNum: this.pageSize,
          currPage: this.cur_page - 1,
        },
        success: (result) => {
          this.tableData = result.data;
          this.total = result.total;
          setTimeout(() => {
            this.loading = false;
          }, 200);
        },
      });
    },
    // 查询
    search() {
      this.loading = true;
      this.$axiosToken({
        url: "/house/searchnumList",
        method: "get",
        data: {
          homestatus: this.value,
          unitname: this.unitname,
          buildnum: this.buildnum,
          homenum: this.homenum,
          homename: this.homename,
          pageNum: this.pageSize,
          currPage: this.cur_page - 1,
        },
        success: (result) => {
          this.tableData = result.data;
          this.total = result.total;
          setTimeout(() => {
            this.loading = false;
          }, 200);
        },
      });
    },
    // 新增
    add() {

    },
    // 删除多选
    delSelect() {
      if (this.selectedIds.length === 0) {
        this.$message.warning("请先选择要删除的行");
        return;
      }else{
        this.$confirm("确定删除选中的用户？", "提示", {
        type: "warning",
      }).then(() => {
        this.$axiosToken({
          url: `/house/delunitList`,
          method: "get",
          data: { 
            id : this.selectedIds 
},
          success: (result) => {
            this.getData();
            this.$message({
              showClose: true,
              message: "删除选中用户成功",
              type: "success",
            });
          },
        });
      });
      }
      
    },
    // delSelect() {
    //   if (this.selectedIds.length === 0) {
    //     this.$message.warning("请先选择要删除的行");
    //     return;
    //   }

    //   // 调用后端接口删除选中的行
    //   this.$axiosToken({
    //     url: "/house/delunitList",
    //     method: "post",
    //     data: {
    //       id: this.selectedIds,
    //     },
    //     success: (result) => {
    //       this.$message.success("删除成功");
    //       // 删除成功后，从表格数据中移除选中的行
    //       this.device = this.device.filter(
    //         (row) => !this.selectedIds.includes(row.id)
    //       );
    //       this.selectedIds = []; // 清空已选中的 ID 列表
    //     },
    //     error: (error) => {
    //       this.$message.error("删除失败");
    //       console.error("Error deleting selected rows:", error);
    //     },
    //   });
    // },
    // 编辑
    edit(row, index) {},
    // 详情
    detail(row) {
      console.log(row.id,'详情')
     this.$router.push({
        path: "/house/numberEdit",
        query: {
          id: row.id,
        },
      });
    },
    // 删除
    deleteData(row, index) {
      console.log(row, "行");
      this.$confirm("确定删除该用户？", "提示", {
        type: "warning",
      }).then(() => {
        const u_id = row.id;
        this.$axiosToken({
          url: "/house/delunitList",
          method: "get",
          data: { id: u_id },
          success: (result) => {
            this.getData();
            this.$message({
              showClose: true,
              message: "删除用户成功",
              type: "success",
            });
          },
        });
      });
    },
    // 类型转文字
    typeFormatter(row, column) {
      const type = row.type;
      if (type == 1) {
        return "管理员";
      } else {
        return "普通用户";
      }
    },
    // 显示数据状态
    showFormatter(row, column) {
      if (row.homeaddress == undefined || row.homeaddress == "") {
        return "暂无";
      } else {
        return row.homeaddress;
      }
    },
  },
};
</script>

<style scoped>
.block {
  margin: 0 20px;
}
.block .day {
  width: 50px;
}
.top {
  width: 100%;
  display: flex;
}
.el-input__inner {
  font-size: 14px;
  height: 36px;
}
.el-input:nth-child(1) {
  width: 30%;
  border-radius: 4px;
}
.el-input:nth-child(2) {
  width: 30%;
  margin-left: 10px;
  border-radius: 4px;
}
.el-input:nth-child(3) {
  width: 22%;
  margin-left: 10px;
  border-radius: 4px;
}
.button1,
.button2,
.button3 {
  border-radius: 4px;
  margin-left: 15px;
  color: #fff;
  font-size: 14px;
  width: 9%;
}
.el-button--mini,
.el-button--mini.is-round {
  padding: 6px 10px;
}
.el-button--mini,
.el-button--small {
  border-radius: 5px;
}

.list {
  margin-top: 25px;
}
.pagination {
  text-align: right;
  margin: 20px 0;
}
.el-input.el-input--mini.el-input--suffix > .el-input__inner {
  height: 28px;
}
.top .ipt {
  width: 300px;
}
</style>